# 自定义主题

Umo Viewer 主要的主题变量使用[CSS 变量](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties)声明，我们推荐使用替换 CSS 变量的方式来进行个性化的主题配置。

### 主题配置
Umo Viewer 支持暗色主题，见[主题配置](./options/theme)。

## CSS 变量

以下是所有可用的 CSS 变量，[点击此处](https://github.com/umodoc/viewer/tree/main/src/assets/styles/_variables.less)可查看完整的 CSS 变量列表。

```css
/* 默认主题 */
```css
:root {
  /** 主题色 **/
  --uv-primary-color: #3480f9;
  --uv-color-white: #fff;
  --uv-color-black: #000;

  /** 字体相关 **/
  --uv-font-family:
    helvetica neue, helvetica, pingfang sc, hiragino sans gb, microsoft yahei,
    simsun, sans-serif;
  --uv-font-size: 14px;
  --uv-font-size-small: 12px;
  --uv-text-color: rgb(51, 54, 57);
  --uv-text-color-light: rgba(0, 0, 0, 0.5);

  /** 边框 **/
  --uv-shadow:
    0 3px 14px 2px rgba(0, 0, 0, 0.03), 0 8px 10px 1px rgba(0, 0, 0, 4%),
    0 5px 5px -3px rgba(0, 0, 0, 8%);
  --uv-border-color: rgba(0, 0, 0, 0.08);
  --uv-border-color-light: rgba(0, 0, 0, 0.05);

  /** 圆角 **/
  --uv-radius: 3px;
  --uv-radius-medium: 5px;

  /** 弹出层 **/
  --uv-popup-content-padding: 12px;
  --uv-popup-max-height: max(60vh, 180px);
  --uv-tooltip-content-padding: 6px 10px;
  --uv-mask-color: transparent;

  /** 布局相关 **/
  --uv-header-height: 56px;
  --uv-container-background: #f4f5f7;
  --uv-page-shadow:
    rgba(0, 0, 0, 0.06) 0px 0px 10px 0px, rgba(0, 0, 0, 0.04) 0px 0px 0px 1px;

  /** 滚动条 **/
  --uv-scrollbar-size: 6px;
  --uv-scrollbar-thumb-color: rgba(0, 0, 0, 0.2);
  --uv-scrollbar-thumb-hover-color: rgba(0, 0, 0, 0.35);
}

/** 暗色主题 **/
[theme-mode='dark'] {
  --uv-color-white: #17171a;
  --uv-color-black: #fff;
  --uv-text-color: #ddd;
  --uv-text-color-light: #bbb;
  --uv-border-color: rgba(255, 255, 255, 0.15);
  --uv-border-color-dark: rgba(255, 255, 255, 0.2);
  --uv-border-color-light: rgba(255, 255, 255, 0.08);
  --uv-container-background: #2a2b2d;
}
```

## 示例

```vue
<template>
  <div class="theme-demo">
    <umo-viewer />
  </div>
</template>

<script setup>
import { UmoViewer } from '@umoteam/viewer'
</script>

<style>
.theme-demo {
  --umo-primary-color: red;
  /* ... */
}
</style>
```

## 在线定制

您可以访问[https://www.umodoc.com/demo?target=viewer&pane=themes](https://www.umodoc.com/demo?target=viewer&pane=themes)，在右侧设置面板中切换到“主题设置”选项卡，修改 CSS 变量 值，即可预览主题效果。
